<template>
    <view class="container">
        <view class="title">我的关注({{ followingList ? followingList.length : 0 }})</view>
        <view class="content">
            <FollowListItem v-for="(item, index) in followingList" :key="index" :buttonList="buttonList" :item="item">
            </FollowListItem>
        </view>
    </view>
</template>
<script setup lang="ts">
import FollowListItem from '../components/FollowListItem.vue';
import { API_getFollowList, API_removeFollowing, API_addFollowing } from '@/service/follow';
import type { FollowItem, ButtonItem } from '@/type/follow';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/store';
import { ref } from 'vue';
const userStore = useUserStore();
const followingList = ref<FollowItem[]>([]);
const buttonList: ButtonItem[] = [
    {
        text: '已关注',
        func: (item: FollowItem) => {
            uni.showModal({
                content: '确认取消关注？',
                success: async function (res) {
                    if (res.confirm) {
                        let res = await API_removeFollowing(item.id, userStore.userInfo!.id!);
                        if (res.code) {
                            item.followed = false;
                        } else uni.showToast({ icon: 'none', title: '操作失败' })
                    }
                }
            });

        }
    },
    {
        text: '+ 关注',
        func: async (item: FollowItem) => {
            let res = await API_addFollowing(item.id, userStore.userInfo!.id!);
            if (res.code) {
                item.followed = true;
            } else uni.showToast({ icon: 'none', title: '操作失败' })
        }
    }
]
const getFollowList = async () => {
    let res = await API_getFollowList(userStore.userInfo!.id!);
    return res.data;
}
onLoad(async () => {
    followingList.value = await getFollowList();
})

</script>
<style scoped lang="scss">
.container {
    margin: 20rpx;

    .title {
        font-size: 30rpx;
        color: #aaa;
        margin-bottom: 20rpx;
    }
}
</style>
